<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
			<p>我的骑手</p>
		</header>
		<div class="order-tabs">
			<div class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
				待抢单
				<div class="tab-underline"></div>
			</div>
			<div class="tab-item" :class="{ active: activeTab === 'processing' }" @click="switchTab('processing')">
				进行中
				<div class="tab-underline"></div>
			</div>
		</div>

		<ul class="orderlist">
			<li v-for="(order, index) in ordersList">
				<div class="order-header">
					<span class="order-status">{{ activeTab === 'pending' ? '待抢单' : '配送中...' }}</span>
					<span class="order-number">{{order.orderId}}#</span>
				</div>
				<div class="order-info">
					<p>门店地址：{{order.businessId == 10001?'浑南区软件园E18楼':'全运路126号'}}</p>
					<p>收货地址：{{order.deliveryAddress.address}}</p>
					<p>上门时间：{{order.orderDate}}</p>
					<div class="user-info">
						<p>{{order.deliveryAddress.contactName}}</p>
						<p>{{order.deliveryAddress.contactTel}}</p>
						<p>配送费{{order.businessId == 10001?3:2.5}}￥</p>
					</div>
					<button @click="acceptOrder(order.orderId)">{{ activeTab === 'pending' ? '抢单' : '交付' }}</button>
				</div>
			</li>
		</ul>
	</div>
</template>


<script>
	export default {
		name: 'MyDelivery',
		data() {
			return {
				user: {},
				ordersList: [],
				activeTab: 'pending',
			};
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.listOrders();
		},
		methods: {
			async switchTab(tab) {
				if (this.activeTab === tab) return; // 避免重复加载

				this.activeTab = tab;

				try {
					if (tab === 'pending') {
						await this.listOrders();
					} else {
						await this.listAcceptOrders();
					}
				} catch (error) {
					console.error('加载订单失败:', error);
					// 这里可以添加错误处理，比如显示提示信息
				}
			},
			async listOrders() {
				let url = `DeliveryWorkerController/listOrders`;
				this.$axios.get(url)
					.then((response) => {
						this.ordersList = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			async listAcceptOrders() {
				let url = `DeliveryWorkerController/listAcceptOrders/${this.user.userId}`;
				this.$axios.get(url)
					.then((response) => {
						this.ordersList = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			acceptOrder(orderId) {
				if (this.activeTab == 'pending') {
					let url_1 = `DeliveryWorkerController/acceptOrder/${orderId}/${this.user.userId}`;
					this.$axios.post(url_1)
						.then((response) => {
							alert('抢单成功');
							this.listOrders();
						})
						.catch((error) => {
							console.error(error);
						});
				} else {
					let url_2 = `DeliveryWorkerController/deliverOrder/${orderId}/${this.user.userId}`;
					this.$axios.post(url_2)
						.then((response) => {
							alert('交付成功');
							this.listAcceptOrders();
						})
						.catch((error) => {
							console.error(error);
						});
				}
			},
			goback() {
				this.$router.go(-1);
			}
		}
	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		/*justify-content: center;*/
		align-items: center;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	/* 选项卡容器 */
	.order-tabs {
		display: flex;
		background-color: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 15px;
		position: sticky;
		top: 44px;
		/* header高度 */
		z-index: 10;
	}

	/* 选项卡项 */
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15px 0;
		font-size: 16px;
		color: #666;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	/* 激活状态样式 */
	.tab-item.active {
		color: #0097FF;
		font-weight: 500;
	}

	/* 下划线指示器 */
	.tab-underline {
		height: 3px;
		width: 0;
		background-color: transparent;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s ease;
		border-radius: 3px 3px 0 0;
	}

	.tab-item.active .tab-underline {
		width: 40%;
		background-color: #0097FF;
	}

	/* 悬停效果 */
	.tab-item:hover {
		color: #333;
	}

	.tab-item.active:hover {
		color: #0097FF;
	}

	.orderlist {
		padding: 4vw;
		margin-top: 12vw;
		list-style: none;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px 10px;
		border-bottom: 1px dashed #e0e0e0;
	}

	.order-status {
		color: #333;
		font-size: 16px;
		font-weight: 600;
		/* 中等加粗 */
	}

	.order-number {
		color: #888;
		font-size: 15px;
		font-family: 'Courier New', monospace;
	}

	.orderlist li {
		margin-bottom: 15px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		border: 1px solid #eaeaea;
	}

	.order-info {
		padding: 15px;
	}

	.order-info p {
		margin-bottom: 10px;
		color: #333;
		font-size: 14px;
		line-height: 1.5;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px 0;
		padding: 10px 0;
		border-top: 1px dashed #eaeaea;
		border-bottom: 1px dashed #eaeaea;
	}

	.user-info p {
		margin-bottom: 0;
		flex: 1;
		text-align: center;
		color: #666;
	}

	.user-info p:not(:last-child) {
		border-right: 1px solid #eaeaea;
	}

	button {
		display: block;
		width: 100%;
		padding: 10px 0;
		background-color: #0097FF;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	button:hover {
		background-color: #0081e6;
	}
</style>
